<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    .tab{width:400px;height: 300px;border: solid 1px black;margin: 0 auto;}
    .tab ul{padding: 0;margin: 0;list-style: none;display: flex;background: #ccc;text-align: center;height: 30px;line-height: 30px;}
    .tab ul li{flex: 1;border-left:solid 1px #fff;border-right:solid 1px #fff;cursor: pointer;}
    .tab ul li.active{background: red;color: #fff;}

    .tab .cont>div{height: 270px;display: none;}
    .tab .cont .cont1{background-color: #399;}
    .tab .cont .cont2{background-color: #393;}
    .tab .cont .cont3{background-color: #993;}
    .tab .cont .cont4{background-color: #939;}
    .tab .cont>div.active{display: block;}
  </style>
</head>
<body>
  <div class="tab">
    <ul>
      <li>手机号登录</li>
      <li>账号密码登录</li>
      <li>二维码登录</li>
      <li>人脸登录</li>
    </ul>
    <div class="cont">
      <div class="cont1">这是用户名密码登录细节</div>
      <div class="cont2">这是手机号登录细节</div>
      <div class="cont3">这是二维码登录细节</div>
      <div class="cont4">这是人脸登录细节</div>
    </div>
  </div>
</body>
<script>
  // OOA：选项卡，切换内容
  // 1. 选择元素【属性】
  // 2. 设置默认索引【属性】
  // 3. 给按钮绑定索引【方法】
  // 4. 绑定点击事件【方法】
    // 5. 隐藏上一个【方法】
    // 6. 获取索引【方法】
    // 7. 显示当前【方法】

  // OOD：
  // function Tab({xx, index}){
  //   this.xx = xx;
  //   this.index = index;
  //   this.addEvent();
  //   this.addIndex();
  // }
  // Tab.prototype.addIndex = function(){}
  // Tab.prototype.addEvent = function(){
  //   this.changeCont();
  // }
  // Tab.prototype.changeCont = function(){
  //   // 隐藏
  //   // 获取
  //   // 显示
  // }
  // new Tab({});

  // OOP:
  function Tab({btns, conts, index}){
    this.btns = btns;
    this.conts = conts;
    this.index = index;
    this.btns[this.index].classList.add("active");
    this.conts[this.index].classList.add("active");
    this.addEvent();
    this.addIndex();
  }
  Tab.prototype.addIndex = function(){
    this.btns.forEach((val,idx)=>{
      val.index = idx;
    })
  }
  Tab.prototype.addEvent = function(){
    const that = this;
    this.btns.forEach(val=>{
      val.onclick = function(){
        that.changeCont( this.index );
      }
    })
  }
  Tab.prototype.changeCont = function(now){
    this.btns[this.index].classList.remove("active");
    this.conts[this.index].classList.remove("active");
    this.btns[now].classList.add("active");
    this.conts[now].classList.add("active");
    this.index = now
  }
  new Tab({
    btns: document.querySelectorAll(".tab ul li"),
    conts: document.querySelectorAll(".tab .cont>div"),
    index: 0
  });


  // 作业：给每行代码都添加注释说明
  





</script>
</html>